<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <!-- 搜索框 -->
       <el-form  label-width="80px">
         <el-row>
           <el-col :span="6">
             <el-form-item  label="关键字">
               <el-input  v-model="keyword" placeholder="根据编号搜索" @clear="clear" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="18" style="text-align:right;">
             <el-button size="small" @click="clearMsg">清除</el-button>
             <el-button size="small" type="primary" @click="onSearch()">搜索</el-button>
           </el-col>
         </el-row>
      </el-form>

      <!-- 数据总数 -->
      <el-alert
        :title="totalNumber"
        type="info"
        style="margin-bottom: 20px"
        :closable="false"
        show-icon>
      </el-alert>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100% ">
        <el-table-column
          prop="id"
          label="编号"
          width="210">
        </el-table-column>
        <el-table-column
          label="题型"
          width="100">
          <template slot-scope="scope">
            {{ scope.row.questionType | questionTypes}}
          </template>
        </el-table-column>
        <el-table-column
          label="题目编号">
          <template slot-scope="scope">
            <div class="questionId" v-for="(item,index) in scope.row.questionIDs" :key="index">
              <a href="javascript:;" @click="showQuest(item)">{{ item.number }} </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="delRandom(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
      background
        style="text-align: right; margin-top: 20px; margin-bottom: 15px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="count"
      >
      </el-pagination>
    </el-card>

    <!-- 试题预览组件 -->
      <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="47%">
        <!-- 绑定v-if 弹框关闭销毁组件 -->
        <questions-preview @close="closeQuestions" v-if="dialogVisible" :userId="userId"/>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入获取组题列表api
import { randoms, removeRandoms } from '@/api/hmmm/questions'

// 导入题型枚举数据
import { questionType } from '@/api/hmmm/constants'

// 导入试题预览组件
import QuestionsPreview from '../components/questions-preview.vue'

export default {
  name: 'Randoms',

  computed: {
    // 总条数
    totalNumber () {
      return '数据一共' + this.count + '条'
    }
  },

  components: {
    QuestionsPreview
  },

  data () {
    return {
      // 表格数据
      tableData: [],
      // 分页数据
      query: {
        // 每页显示条目个数
        pagesize: 20,
        // 当前页数
        page: 1
      },
      // 搜索数据,要与接口文档的参数名称一致
      keyword: '',
      // 总条数
      count: 0,
      // 是否展示弹出层
      dialogVisible: false,
      // 给子组件传递的对象
      userId: {}
    }
  },

  created () {
    this.getRandoms()
  },

  methods: {
    // 清除
    clearMsg () {
      this.keyword = ''
      this.query.keyword = ''
      this.getRandoms()
    },

    // 关闭题目预览子组件
    closeQuestions () {
      this.dialogVisible = false
    },

    // 给子组件传递id
    showQuest (item) {
      this.userId = item
      this.dialogVisible = true
    },

    // 删除组题列表
    async delRandom (data) {
      const confirmRes = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmRes === 'cancel') return this.$message('您已取消删除！')
      await removeRandoms(data)
      this.$message.success('删除成功')
      if (this.tableData.length === 1) {
        this.query.page--
        if (this.query.page <= 1) {
          this.query.page = 1
        }
      }
      this.getRandoms()
    },

    // 编号搜索
    async onSearch () {
      this.query.page = 1
      this.query.keyword = this.keyword
      await randoms(this.query)
      this.getRandoms()
    },

    // 清除事件
    clear () {
      this.query.keyword = ''
      this.getRandoms()
    },

    // 获取组题列表
    async getRandoms () {
      const res = await randoms(this.query)
      this.tableData = res.data.items
      this.count = res.data.counts
    },

    // 切换每页显示条数
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.getRandoms()
    },

    // 当前页数发生改变时
    handleCurrentChange (page) {
      this.query.page = page
      this.getRandoms()
    }
  },

  filters: {
    // 题型的枚举
    questionTypes (val) {
      const res = questionType.find(item => item.value === Number(val))
      return res.label
    }
  }
}
</script>

<style scoped>
.questionId {
  color:#0099ff;
  line-height: 20px;
}
</style>
